<template>
  <div class="page">
    <HeaderBar :fixed="true" theme="white" :placeholder="true" />
    <div class="page-container">
      <div class="page-main">
        <h1 class="page-title">隐私政策</h1>
        <div class="page-content" v-html="content"></div>
      </div>
    </div>
    <FooterBar />
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import HeaderBar from '@/components/HeaderBar/index.vue'
  import FooterBar from '@/components/FooterBar/index.vue'
  import { getProtocol } from '@/api/common'
  import { hideLoading } from '@/utils/utils';

  const content = ref('')

  onMounted(() => {
    loadData()
  }) 

  const loadData = () => {
    getProtocol().then(res => {
      content.value = res.data.list.privacy
      hideLoading()
    })
  };


</script>

<style lang="scss">
  @use '@/assets/style/common.scss';
  .page-container {
    padding-top: 6.25rem /* 100/16 */;
    padding-bottom: 8.125rem /* 130/16 */;
  }
  .page-main {
    width: 75rem /* 1200/16 */;
    max-width: 92vw;
    background: #FFFFFF;
    margin: 0 auto;
  }
  .page-title {
    text-align: center;
    font-size: 2.625rem /* 42/16 */;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #000000;
    padding-bottom: 5rem /* 80/16 */;
    border-bottom: 1px solid #F2F2F2;
  }
  .page-content {
    margin-top: 3.125rem /* 50/16 */;
    font-size: 1rem /* 16/16 */;
    line-height: 2.125rem /* 34/16 */;
    color: #333333;
    p, span {
      font-size: 1rem /* 16/16 */;
      line-height: 2.125rem /* 34/16 */;
      color: #333333;
    }
  }
</style>